
  <!-- 班次详情 -->
<template>
  <el-tabs
    v-model="data.activeName"
    type="border-card"
    class="workdetail"
    @tab-click="handleClick"
  >
    <el-tab-pane label="班次详情" name="0">
      <el-table :data="data.tableData" empty-text="暂无数据" height="450">
        <el-table-column prop="index" label="编号" />
        <el-table-column prop="realCarNum" label="车牌" />
        <el-table-column prop="roadName" label="服务路段" />
        <el-table-column prop="beginStakeNum" label="起始位置" />
        <el-table-column prop="endStakeNum" label="终止位置" />
        <el-table-column prop="sumHeadS" label="前置评分" />
        <el-table-column prop="sumBackS" label="后置评分" />
        <el-table-column prop="leftLevelName" label="左置评分" />
        <el-table-column prop="rightLevelName" label="右置评分" />
        <el-table-column prop="sumComS" label="对比分" />
        <el-table-column prop="workHours" label="工作时长" />
        <el-table-column prop="sumZs" label="汇总分" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="台班查询" name="1">
      <div class="workQueryScoreInfo" v-if="data.bool != true">
        <div class="workQueryScoreInfoBottom">
          <div v-for="item in data.workQueryScoreInfoVal" :key="item.id">
            <div class="cleanCar-content-left-score-data-left">
              <p style="color: #2290fe">{{ item.coreTypeName }}评分</p>
            </div>
            <!-- <dv-border-box-7
          :color="['#0b275c', '#2290fe']"
          class="cleanCar-content-left-score-data-left"
        >
          <p style="color: #2290fe">{{ item.coreTypeName }}评分</p>
        </dv-border-box-7> -->
            <div class="boxtitleBottom">
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">
                  前置评分
                </div>
                <div class="cleanCar-content-left-score-data-score">
                  <!---->
                  {{ item.headScore }}
                </div>
              </div>
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">
                  后置评分
                </div>
                <div class="cleanCar-content-left-score-data-score">
                  {{ item.backScore }}
                </div>
              </div>
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">对较分</div>
                <div class="cleanCar-content-left-score-data-score">
                  {{ item.comScore }}
                </div>
              </div>
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">
                  左侧等级(个数)
                </div>
                <div class="cleanCar-content-left-score-data-score">
                  {{ item.leftLevelName }}
                </div>
              </div>
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">
                  右侧等级(个数)
                </div>
                <div class="cleanCar-content-left-score-data-score">
                  {{ item.rightLevelName }}
                </div>
              </div>
              <div class="boxtitle">
                <div class="cleanCar-content-left-score-data-title">汇总分</div>
                <div class="cleanCar-content-left-score-data-score">
                  {{ item.sumScore }}
                </div>
              </div>
              <button class="road-but" @click="analyzeClick(item.coreType)">
                打分依据
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="workQueryScoreInfo2" v-if="data.bool != false">
        <el-table
          :data="data.tableDelData"
          @row-click="trClick"
          height="450"
          style="width: 70%"
          empty-text="暂无数据"
        >
          <el-table-column prop="roadLargeNum" label="桩号" />
          <el-table-column prop="headS" label="前置评分" />
          <el-table-column prop="backS" label="后置评分" />
          <el-table-column prop="comS" label="对比分" />
          <el-table-column prop="leftLevelName" label="左侧垃圾" />
          <el-table-column prop="rightLevelName" label="右侧垃圾" />
          <el-table-column prop="carDirectionName" label="方向" />
          <el-table-column prop="receiveTime" label="时间" />
        </el-table>
        <div class="rightImg">
          <div class="leftImg">
            <dl>
              <dt>
                <span></span>
                前置摄像头照片
              </dt>
              <dd>
                <img
                  :src="data.tableDelImg.headImgUrl"
                  class="image-slot"
                  v-if="data.tableDelImg.headImgUrl"
                />
                <Picture class="image-slot" v-else />
              </dd>
            </dl>
            <dl>
              <dt><span></span> 左侧摄像头照片</dt>
              <dd>
                <img
                  :src="data.tableDelImg.leftImgUrl"
                  class="image-slot"
                  v-if="data.tableDelImg.leftImgUrl"
                />
                <Picture class="image-slot" v-else />
              </dd>
            </dl>
          </div>
          <div class="rightImg">
            <dl>
              <dt><span></span> 后置侧摄像头照片</dt>
              <dd>
                <img
                  :src="data.tableDelImg.backImgUrl"
                  class="image-slot"
                  v-if="data.tableDelImg.backImgUrl"
                />
                <Picture class="image-slot" v-else />
              </dd>
            </dl>
            <dl>
              <dt><span></span> 右侧摄像头照片</dt>
              <dd>
                <img
                  :src="data.tableDelImg.rightImgUrl"
                  class="image-slot"
                  v-if="data.tableDelImg.rightImgUrl"
                />
                <Picture class="image-slot" v-else />
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import { getWorkDetail,getWorkqueryscoreinfo,getWorkqueryscorejudge } from "@/api/sweepercar/global";
import { onMounted, reactive, nextTick } from "vue";
let data = reactive({
  workQueryScoreInfoVal: [],
  activeName: 0,
  bool: false,
  tableData: [],
  tableDelData: [],
  tableDelImg: {
    headImgUrl: "",
    leftImgUrl: "",
    backImgUrl: "",
    rightImgUrl: "",
  },
});

// 初始化页面数据
onMounted(() => {
  nextTick(() => {
    headScoreClick();
  });
});
// 班次详情
const headScoreClick = async () => {
  const res = await getWorkDetail();
  const { status, message } = res;
  if (status === 0) {
    data.tableData = res.data.list.map((x, y) => {
      x.index = y+1;
      return x;
    });
  }
};
// 台班查询
const workQueryClick = async () => {
  const res = await getWorkqueryscoreinfo();
  const { status, message } = res;
  if (status === 0) {
    data.workQueryScoreInfoVal = res.data.map(x=>{
      x.headScore=(x.headScore*1).toFixed(2) 
      x.backScore=(x.backScore*1).toFixed(2) 
      x.comScore=(x.comScore*1).toFixed(2) 
      x.sumScore=(x.sumScore*1).toFixed(2) 
      return x
    })
  }
};
// 分支切换
const handleClick = () => {
  data.bool = false;
  if(data.activeName==0){
    headScoreClick();
  }else{
    workQueryClick()
  }
};
// 打分依据
const analyzeClick =async (val: string) => {
  data.bool = true;
  const res = await getWorkqueryscorejudge();
  const { status, message } = res;
  if (status === 0) {
    data.tableDelData = res.data.list
  }
};
const trClick = (row) => {
  data.tableDelImg = row
};
</script>
<style lang="less" scoped>
.workdetail {
  height: 90% !important;
  border: 0 !important;

  /deep/ .el-tabs__content {
    height: 100% !important;
  }

  /deep/ .el-tabs__nav-wrap {
    background: #051b31 !important;
  }

  /deep/ .el-tabs__item {
    margin-right: 1rem;
    background: #0a325a;
    border: 0 !important;
    color: #fff;
  }

  /deep/ .el-tabs__content {
    background: #051b31;
    color: #fff;
  }

  /deep/ .is-active {
    background: url("../../../../../../assets//images/sweepercar/background.png")
      no-repeat;
    background-color: #051b31 !important;
    background-size: 100% 100%;
    border: 0 !important;
    color: #05b6f8;
  }

  /deep/ .el-table * {
    background: #051b31 !important;
    color: #fff;
    border: 0 !important;
  }

  /deep/ .el-table__header * {
    background: #104983 !important;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .el-table__row * {
    // background: #104983 !important;
    height: 20px;
    line-height: 20px;
  }
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #051b31 !important;
}

// 台班查询
.cleanCar-content-left-score-data-left {
  width: 7rem;
  line-height: 40px;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: url("../../../../../../assets//images/sweepercar/background.png")
    no-repeat;
  background-size: 100% 100%;
}
.boxtitleBottom {
  margin: 20px 0;
  display: flex;
  align-items: center;

  .boxtitle {
    width: 100%;

    .cleanCar-content-left-score-data-score {
      color: #2290fe;
      font-weight: bold;
      font-size: 34px;
    }
  }
}
/deep/ .road-but {
  white-space: nowrap;
  height: 2.5rem;
  line-height: 0rem;
  // padding: 10px 20px;
  margin-left: 15px;
  border-radius: 5px;
  border: 0;
  color: white;
  cursor: pointer;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#01befe),
    to(#2290fe)
  );
  background: linear-gradient(to bottom, #01befe 0%, #2290fe 100%);
}
// 详情
#pane-1 {
  height: 100%;
}
.workQueryScoreInfo2 {
  display: flex;
  height: 100%;
  .rightImg {
    flex: 1;
    height: 100%;
    > div {
      display: flex;
      justify-content: space-around;
      height: 50%;
    }
    dl {
      flex: 1;
      height: 100%;
      margin-left: 1rem;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      dt {
        height: 1.875rem;
        margin-bottom: 0.625rem;
        span {
          border-left: 3px solid #1d7cda;
          padding-right: 5px;
        }
      }
      dd {
        flex: 1;
        .image-slot {
          width: 100%;
          height: 100%;
          height: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        // height: 200px;
      }
    }
  }
}
</style>
